<style>
.base-info .flex{
    line-height:2rem;
    border-bottom: 1px solid #bbb;
    font-size: 0.9rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.base-info text:nth-child(2) { color: green;}
.base-info .flex:first-child {
    border-top: 1px solid #bbb;
}
.status-1 { color: green !important; }
.status-2 { color: gray !important; }
.status-4 { color: red !important; }
</style>
<template>
    <view class="bg-gray-100">
        <view class="p-4">
            <view class="text-lg font-bold text-center bg-orange text-white py-2 mb-4">{{ course.course_name }}</view>
            <view class="base-info">
                <view class="flex"><text class="flex-1">标准课时</text><text>{{ course.course_num }}</text></view>
                <view class="flex"><text class="flex-1">赠送课时</text><text>{{ course.send_num }}</text></view>
                <view class="flex"><text class="flex-1">已销课时</text><text>{{ course.learned_num }}</text></view>
                <view class="flex"><text class="flex-1">剩余课时</text><text>{{ course.course_num + course.send_num - course.learned_num  }}</text></view>
                <view class="flex"><text class="flex-1">购买金额</text><text>{{ course.pay_price }}</text></view>
                <view class="flex"><text class="flex-1">购买时间</text><text>{{ course.created_at.slice(0, 10) }}</text></view>
                <view class="flex"><text class="flex-1">有效日期</text><text>{{ course.valid_end_date }}</text></view>
            </view>
        </view>
        <view class="h-2 bg-white"></view>
        <!-- 消课记录 -->
         <view class="p-4">
            <view class="text-lg font-bold text-center bg-orange text-white py-2 mb-4">上课记录</view>
            <u-table>
                <u-tr>
                    <u-th>日期</u-th>
                    <!-- <u-th>班级</u-th> -->
                    <u-th>签到</u-th>
                    <u-th>扣课</u-th>
                </u-tr>

                <u-tr v-if="!signs.length">
                    <u-td>暂无数据</u-td>
                </u-tr>

                <u-tr v-for="(item, index) in signs" :key="index">
                    <u-td>{{ item.date }}</u-td>
                    <!-- <u-td>动漫周三</u-td> -->
                    <u-td :class="'status-' + item.result">{{ courseStatus(item.result) }}</u-td>
                    <u-td>{{ item.course_num }}</u-td>
                </u-tr>
            </u-table>
         </view>
    </view>
</template>
<script lang="ts" setup>
    import { ref, onMounted, computed } from 'vue'
    import { onLoad } from '@dcloudio/uni-app';
    import { http } from '@/utils/http'
    const course = ref({
        created_at: ''
    })
    const signs = ref([])
    onLoad((options) => {
        http.post('/api-mini/student/course/detail', { studentCourseId: options.id }).then(res => {
            const response = res as ApiResponse;
            course.value = response.data;
            getSigns()
        })
    })

    const courseStatus = computed(() => (status) =>{
        switch (status) {
            case 1:
                return '正常';
            case 2:
                return '迟到';
            case 3:
                return '请假';
            default:
                return '旷课';
        }
    })
    const getSigns = () => {
        http.post('/api-mini/student/course/signs', { courseId: course.value.course_id }).then(res => {
            const response = res as ApiResponse;
            signs.value = response.data;
        })
    }
</script>
